import { Button, Result } from 'antd'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { ResultStatusType } from 'antd/es/result'
import styles from './index.module.less'

interface ErrorConfig {
  status: ResultStatusType
  title: string
  subTitle: string
}

const errorConfigs: Record<string, ErrorConfig> = {
  '403': {
    status: '403',
    title: '403',
    subTitle: '抱歉，您没有权限访问此页面',
  },
  '404': {
    status: '404',
    title: '404',
    subTitle: '抱歉，您访问的页面不存在',
  },
  '500': {
    status: '500',
    title: '500',
    subTitle: '抱歉，服务器出错了',
  },
}

function ErrorPage() {
  const navigate = useNavigate()
  const [searchParams] = useSearchParams()
  const errorCode = searchParams.get('code') || '404'
  
  const config = errorConfigs[errorCode] || errorConfigs['404']

  return (
    <div className={styles.errorContainer}>
      <Result
        status={config.status}
        title={config.title}
        subTitle={config.subTitle}
        extra={[
          <Button type="primary" key="home" onClick={() => navigate('/')}>
            返回首页
          </Button>,
          <Button key="back" onClick={() => navigate(-1)}>
            返回上一页
          </Button>,
        ]}
      />
    </div>
  )
}

export default ErrorPage